<script setup>
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import RobotCertification from '../../components/robotCertification/RobotCertification.vue';
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { register } from '@/server/api/auth.js';
import { ElMessage } from 'element-plus';
import { useConfirmPasswordValidator, validateEmail } from '@/utils/formValidation.js';
import EmailverficationPopup from '../../components/email/EmailverficationPopup.vue';
const router = useRouter();
const mailVisible = ref(false);
const domain = ref(window.location.origin + '/doc/ibe_service_agreement_ch.pdf');
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

let form = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  captcha: [],
});
const loginForm = ref('');
const serviceAgreement = ref(false);
let emailRef = ref(null);

let animationObj = reactive({
  shakeAnimation: false,
  agreed: false,
});

const rules = {
  username: [
    { required: true, message: t('mall.enter_account_number'), trigger: 'blur' },
    { validator: validateEmail, trigger: 'blur' },
  ],
  password: [
    { required: true, message: t('mall.enter_password'), trigger: 'blur' },
    { min: 6, message: t('mall.password_min_length', { num: 6 }), trigger: 'blur' },
  ],
  confirmPassword: useConfirmPasswordValidator(form),
  captcha: [
    { type: 'array', required: true, message: t('mall.captcha_verification'), trigger: 'change' },
  ],
};

const validateLoginForm = () => {
  return loginForm.value.validate();
};

/**
 * 注册表单校验
 */
const handleLogin = async () => {
  if (!serviceAgreement.value) {
    // 用户未同意协议，进行相应处理
    animationObj.shakeAnimation = true;
    setTimeout(() => {
      animationObj.shakeAnimation = false;
    }, 500);
  }
  const valid = validateLoginForm();
  if (valid) {
    mailVisible.value = true;
    emailRef.value.typeName(form);
  } else {
    console.log('校验失败');
  }
};

const close = () => {
  mailVisible.value = false;
};

const goToLogin = () => {
  router.push({
    path: '/login',
  });
};

/**
 * 用户协议
 * @param {*} value
 */
const handleAgreementChange = (value) => {
  serviceAgreement.value = value;
};

/**
 * 机器人校验值
 * @param {*} value
 */
const changeRobotCertification = (value) => {
  form.captcha[0] = value;
};
</script>
<template>
  <smt-header></smt-header>
  <div class="login">
    <div class="login-container">
      <!-- 登录容器 -->
      <div class="login-box">
        <h2 class="login-box-title">{{ $t('om.MemberRegistration') }}</h2>
        <el-form
          ref="loginForm"
          class="login-form"
          :model="form"
          :rules="rules"
          hide-required-asterisk
        >
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              autocomplete="off"
              :placeholder="$t('om.EmailAccount')"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              autocomplete="off"
              :placeholder="$t('om.PIN')"
            />
          </el-form-item>
          <el-form-item prop="confirmPassword">
            <el-input
              v-model="form.confirmPassword"
              type="password"
              autocomplete="off"
              :placeholder="$t('om.ConfirmPassword')"
            />
          </el-form-item>
          <el-form-item label-width="0" prop="captcha">
            <el-checkbox-group v-model="form.captcha">
              <RobotCertification
                name="captcha"
                @changeRobotCertification="changeRobotCertification"
              />
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <el-button
          class="login-btn"
          type="primary"
          @click="handleLogin()"
          :disabled="!animationObj.agreed"
          >{{ $t('om.Subscribe') }}</el-button
        >
      </div>
      <div class="service-agreement">
        <el-checkbox v-model="animationObj.agreed" @change="handleAgreementChange" size="large" />
        <a :href="domain" target="_blank" style="margin-left: 10px; color: #5255fe">{{
          $t('om.UserServiceAgreement')
        }}</a>
      </div>
      <p class="login-tips">
        {{ $t('om.Alreadyhaveamember') }}<a class="link" @click="goToLogin">{{ $t('om.Login') }}</a>
      </p>
    </div>
  </div>

  <!-- 底部 -->
  <smt-footer></smt-footer>

  <!--邮箱验证-->
  <EmailverficationPopup
    v-model="mailVisible"
    @close="close"
    type="1"
    :title="$t('om.RegisterEmailVerification')"
    ref="emailRef"
  >
  </EmailverficationPopup>
</template>

<style lang="scss" scoped>
.shake {
  animation: shake 0.5s ease-in-out;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  box-sizing: border-box;
  padding-top: 80px;
  height: 700px;
  background: url('@/assets/images/login/bg_login@2x.png') no-repeat;
  background-size: cover;
  .link {
    cursor: pointer;
  }
  &-container {
    margin: 0 auto;
    width: 382px;
    .login-box {
      box-sizing: border-box;
      padding: 24px 36px;
      // height: 386px;
      border-radius: 28px;
      background: #ffffff4d;
      &-title {
        padding-bottom: 24px;
        text-align: center;
        color: #5255fe;
        font-size: 20px;
        font-weight: 700;
        color: var(--mall-color-primary);
      }

      .login-form {
        .el-input {
          --el-input-height: 45px;
        }

        .el-form-item {
          margin-bottom: 20px;
        }

        .captcha-box {
          box-sizing: border-box;
          width: 100%;
          padding: 0px 12px;
          border-radius: 8px;
          border: 1px solid #ffffff;
          background: #ffffff66;
        }
      }

      .login-btn {
        margin-top: 4px;
        width: 100%;
        height: 52px;
      }
    }

    .other-login {
      &-box {
        display: flex;
        justify-content: space-between;
        padding: 24px 52px 0;
        > img {
          cursor: pointer;
          width: 40px;
        }
      }
    }

    .login-tips {
      padding-top: 24px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      > a {
        display: inline-block;
        color: var(--mall-color-primary);
        text-decoration: underline;
      }
    }
    .service-agreement {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
  }
}
:deep(.el-checkbox__label) {
  color: var(--mall-color-primary);
}
</style>
